<script setup lang="ts">
import { ref } from 'vue'
import CollapsiblePanel from './common/CollapsiblePanel.vue'
import ToggleButton from './common/ToggleButton.vue'
import InputField from './common/InputField.vue'
import CopyToClipboard from './common/CopyToClipboard.vue'

// 导入公共样式


// 表单数据状态定义
const preApprovalForm = ref({
  // 区块1相关数据
  审批权是否下放: '否',
  下放依据文件: '',
  审批权下放部门: '',
  预审通过年月: '',
  预审自然资源主管部门: '',
  预审文号: '',
  
  // 区块2相关数据
  预审层级: '',
  占用永久基本农田且由省级自然资源主管部门预审: '否',
  贫困地区类型: '',
  立项与预审层级一致: '是',
  不一致原因: '',
  预审总面积: '',
  预审农用地: '',
  预审耕地: '',
  预审永农: '',
  申报用地与预审控制用地规模: '一致',
  超出原因: '',
  超出面积: '',
  超出农用地: '',
  超出耕地: '',
  超出永农: '',
  超出比例: '',
  范围重合度: ''
})

// 生成要复制的文本
const generateCopyText = (): string => {
  let paragraph: string = ''
  
  // 构建区块1文本
  paragraph += `〔用地预审情况〕\n`
  paragraph += `该项目符合基本建设投资管理规定。\n`
  
  if (preApprovalForm.value.审批权是否下放 === "是") {
    paragraph += `按照${preApprovalForm.value.下放依据文件}规定，${preApprovalForm.value.审批权下放部门}于${preApprovalForm.value.预审通过年月}通过用地预审（文号：${preApprovalForm.value.预审文号}）。\n\n`
  } else {
    paragraph += `${preApprovalForm.value.预审通过年月}，${preApprovalForm.value.预审自然资源主管部门}通过用地预审（文号：${preApprovalForm.value.预审文号}）。\n\n`
  }
  
  // 构建区块2文本
  paragraph += `〔落实预审意见〕\n`
  paragraph += `该项目由${preApprovalForm.value.预审层级}自然资源主管部门通过预审。\n`
  
  if (preApprovalForm.value.占用永久基本农田且由省级自然资源主管部门预审 === "是") {
    paragraph += `该项目属于${preApprovalForm.value.贫困地区类型}，符合占用永久基本农田条件，由省级自然资源主管部门通过预审。\n`
  }
  
  paragraph += `与批准项目立项的政府部门层级一致，用地预审层级符合有关规定。\n`
  
  if (preApprovalForm.value.立项与预审层级一致 === "否") {
    paragraph += `（立项与预审层级不一致原因：${preApprovalForm.value.不一致原因}）\n`
  }
  
  paragraph += `项目用地预审控制规模${preApprovalForm.value.预审总面积}公顷，其中农用地${preApprovalForm.value.预审农用地}公顷（耕地${preApprovalForm.value.预审耕地}公顷、永久基本农田${preApprovalForm.value.预审永农}公顷），\n`
  
  if (preApprovalForm.value.申报用地与预审控制用地规模 === "一致") {
    paragraph += `申报用地与预审控制用地规模一致。`
  } else if (preApprovalForm.value.申报用地与预审控制用地规模 === "基本一致") {
    paragraph += `申报用地与预审控制用地规模基本一致。`
  } else if (preApprovalForm.value.申报用地与预审控制用地规模 === "超出规模") {
    paragraph += `因${preApprovalForm.value.超出原因}，申报用地超出预审控制规模${preApprovalForm.value.超出面积}公顷，其中农用地${preApprovalForm.value.超出农用地}公顷（含耕地${preApprovalForm.value.超出耕地}公顷、永久基本农田${preApprovalForm.value.超出永农}公顷）。\n`
    
    const exceedRatio = parseFloat(preApprovalForm.value.超出比例 || '0')
    const overlapDegree = parseFloat(preApprovalForm.value.范围重合度 || '100')
    
    if (exceedRatio >= 10 || overlapDegree < 80) {
      paragraph += `（建设项目申请总面积超出用地预审总面积达到10%且范围重合度低于80%，需对用地变化情况的必要性、合理性作出说明。）`
    }
  }
  
  return paragraph
}
</script>

<template>
  <div>
    <h1 class="text-3xl font-bold text-blue-700 text-center mb-6">土地预审单元</h1>
    
    <!-- 文件原文（可折叠） -->
    <CollapsiblePanel title="文件原文">
      <div class="mb-4">
        <h3 class="font-semibold text-gray-700 mb-2">一、业务指导处室</h3>
        <p class="text-gray-600">行政审批管理处、国土空间用途管制处</p>
      </div>
      
      <div class="mb-4">
        <h3 class="font-semibold text-gray-700 mb-2">二、审查标准</h3>
        <ol class="list-decimal pl-5 text-gray-600 space-y-2">
          <li>已按规定通过用地预审，预审层级应符合要求，应在预审批准后且有效期内批复可研报告或核准项目。</li>
          <li>重新预审的符合有关规定。</li>
          <li>用地规模和用地预审控制规模比对情况应符合有关要求。</li>
        </ol>
      </div>
    </CollapsiblePanel>
    
    <!-- 审查内容模板（常驻显示） -->
    <div class="border border-gray-200 rounded-lg shadow mb-6 bg-white text-left">
      <div class="bg-gray-50 p-4 border-b">
        <h2 class="text-xl font-semibold text-gray-800">三、审查内容模板</h2>
      </div>
      
      <div class="p-4">
        <!-- 区块1：用地预审情况 -->
        <div class="section-block blue mb-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-3">土地预审单元不区分单选和批次，用的是同一套模板</h3>
          <div class="text-gray-700 space-y-3">
            <p>〔用地预审情况〕</p>
            <p>该项目符合基本建设投资管理规定。</p>
            
            <div class="my-4">
              <div class="flex items-center">
                <ToggleButton 
                  v-model="preApprovalForm.审批权是否下放" 
                />
                <label class="section-label red ml-2">审批权是否下放：</label>
              </div>
            </div>
            
            <div v-if="preApprovalForm.审批权是否下放 === '是'">
              <p>按照
                <InputField v-model="preApprovalForm.下放依据文件" placeholder="下放依据" />
                规定，
                <InputField v-model="preApprovalForm.审批权下放部门" placeholder="*审批权下放至*部门" width="10rem" />
                办理，
                <InputField v-model="preApprovalForm.预审通过年月" placeholder="*年*月" />
                ，该项目通过
                <InputField v-model="preApprovalForm.预审自然资源主管部门" placeholder="*自然资源厅" width="10rem" />
                用地预审(
                <InputField v-model="preApprovalForm.预审文号" placeholder="文号" />
                )。
              </p>
            </div>
            
            <div v-else class="ml-4 pl-4 text-blue-800">
              <p>
                <InputField v-model="preApprovalForm.预审通过年月" placeholder="*年*月" />
                ，
                <InputField v-model="preApprovalForm.预审自然资源主管部门" placeholder="*自然资源厅" width="10rem" />
                通过用地预审（文号：
                <InputField v-model="preApprovalForm.预审文号" placeholder="文号" />
                ）。
              </p>
            </div>
          </div>
        </div>
        
        <!-- 区块2：落实预审意见 -->
        <div class="section-block green">
          <div class="text-gray-700 space-y-3">
            <p>〔落实预审意见〕</p>
            <!-- 用户选择判断区 -->
            <div class="space-y-3">
              <div class="flex items-center">
                <ToggleButton 
                  v-model="preApprovalForm.占用永久基本农田且由省级自然资源主管部门预审" 
                  :options="[
                    { label: '是', value: '是' },
                    { label: '否', value: '否' }
                  ]" 
                />
                <label class="section-label red ml-2">是否占用永久基本农田且由省级自然资源主管部门预审？</label>
              </div>
              <div class="flex items-center">
                <ToggleButton 
                  v-model="preApprovalForm.立项与预审层级一致" 
                  :options="[
                    { label: '是', value: '是' },
                    { label: '否', value: '否' }
                  ]" 
                />
                <label class="section-label red ml-2">立项与预审层级一致：</label>
              </div>
              <div class="flex items-center">
                <ToggleButton 
                  v-model="preApprovalForm.申报用地与预审控制用地规模" 
                  :options="[
                    { label: '一致', value: '一致' },
                    { label: '基本一致', value: '基本一致' },
                    { label: '超出规模', value: '超出规模' }
                  ]" 
                />
                <label class="section-label red ml-2">申报用地与预审控制用地规模：</label>
              </div>
            </div>

            <!-- 用户输入交互区 -->
            <div v-if="preApprovalForm.占用永久基本农田且由省级自然资源主管部门预审 === '是'" >
              <p>该项目属于
                <InputField v-model="preApprovalForm.贫困地区类型" placeholder="深度贫困地区/集中连片特因地区/国家扶贫开发工作重点县省级以下基础设施、易地扶贫搬迁、民生发展项目" width="w-80" />
                ，符合占用永久基本农田条件，由省级自然资源主管部门通过预审。</p>
            </div>
            <div v-if="preApprovalForm.占用永久基本农田且由省级自然资源主管部门预审 === '否'" >
              <p>该项目由
                <InputField v-model="preApprovalForm.预审层级" placeholder="预审层级" />
                自然资源主管部门通过预审，
              </p>
            </div>
            <div v-if="preApprovalForm.立项与预审层级一致 === '是'" >
              <p>与批准项目立项政府部门层级一致，用地预审层级符合有关规定。</p>
            </div>
            <div v-if="preApprovalForm.立项与预审层级一致 === '否'" >
              <p>立项与预审层级不一致，具体原因：
                <InputField v-model="preApprovalForm.不一致原因" placeholder="不一致原因" width="10rem" />
              </p>
            </div>
            
            <p >项目用地预审控制规模
              <InputField v-model="preApprovalForm.预审总面积" type="number" step="0.01" min="0" placeholder="面积" />
              公顷，其中农用地
              <InputField v-model="preApprovalForm.预审农用地" type="number" step="0.01" min="0" placeholder="面积" />
              公顷（耕地
              <InputField v-model="preApprovalForm.预审耕地" type="number" step="0.01" min="0" placeholder="面积" />
              公顷、永久基本农田
              <InputField v-model="preApprovalForm.预审永农" type="number" step="0.01" min="0" placeholder="面积" />
              公顷），</p>

            <div v-if="preApprovalForm.申报用地与预审控制用地规模 === '一致'" >
              <p>申报用地与预审控制用地规模一致。</p>
            </div>
            
            <div v-if="preApprovalForm.申报用地与预审控制用地规模 === '基本一致'" >
              <p>申报用地与预审控制用地规模基本一致。</p>
            </div>
            
            <div v-if="preApprovalForm.申报用地与预审控制用地规模 === '超出规模'" >
              <p>因
                <InputField v-model="preApprovalForm.超出原因" placeholder="超出原因" />
                ，申报用地超出预审控制规模
                <InputField v-model="preApprovalForm.超出面积" type="number" step="0.01" min="0" placeholder="面积" />
                公顷，其中农用地
                <InputField v-model="preApprovalForm.超出农用地" type="number" step="0.01" min="0" placeholder="面积" />
                公顷（含耕地
                <InputField v-model="preApprovalForm.超出耕地" type="number" step="0.01" min="0" placeholder="面积" />
                公顷、永久基本农田
                <InputField v-model="preApprovalForm.超出永农" type="number" step="0.01" min="0" placeholder="面积" />
                公顷）。</p>
              
              <div class="mt-3">
                <label class="mr-3">超出比例：</label>
                <InputField v-model="preApprovalForm.超出比例" type="number" step="0.1" min="0" placeholder="比例" width="w-24" />
                <span class="mr-6">%</span>
                
                <label class="mr-3">范围重合度：</label>
                <InputField v-model="preApprovalForm.范围重合度" type="number" step="0.1" min="0" max="100" placeholder="重合度" width="w-24" />
                <span>%</span>
              </div>
              
              <div v-if="parseFloat(preApprovalForm.超出比例 || '0') >= 10 || parseFloat(preApprovalForm.范围重合度 || '100') < 80" class="mt-3">
                <p>（建设项目申请总面积超出用地预审总面积达到10%且范围重合度低于80%，需对用地变化情况的必要性、合理性作出说明。）</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 复制按钮和显示复制的文本内容 -->
    <CopyToClipboard :text="generateCopyText()" />
  </div>
</template>

<style scoped>
/* 组件特定样式保留 */
</style>